/* eslint-disable no-unused-vars */
<template>
    <div
        class="mapcontainer"
        ref="mapContainer"
        :style="{ height: height, width: width }"
    >
        <div
            class="mask"
            v-if="!clickable"></div>
        <div
            id="baiduMap"
            ref="divMap"></div>
    </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import {
    initMap
    // getUserPosition
} from '@/util/Map';
import { selfI18n } from '../../i18n/index';
import { useAvatertSetup } from '@/setup/common/AvaterSetup.js';
export default {
    props: {
        clickable: {
            type: Boolean,
            default: false
        },
        height: String,
        width: String,
        address: {
            type: Object,
            default () {
                return {
                    title: selfI18n('wp_Beijing_Tiananmen_Square'),
                    address: selfI18n('wp_Beijing_Tiananmen_Square'),
                    point: { lng: 116.404, lat: 39.915 }
                };
            }
        },
        username: String
    },
    components: {},
    emits: ['onFixedPosition', 'changedPosition'],
    name: 'BMapLocation',
    setup (props, context) {
        const { backgroundColors, randomBackgroundColor, lightenColor } = useAvatertSetup();
        // 地图节点
        const divMap = ref(null);
        const mapContainer = ref(null);
        let baiduMapInstance = null;
        let marker = null;

        // eslint-disable-next-line no-unused-vars
        const initBaiduMap = (point) => {
            baiduMapInstance = initMap(divMap.value, point);
            baiduMapInstance.centerAndZoom(point, 14);
            baiduMapInstance.panTo(point);
            addMarker(point);
            var geoc = new BMap.Geocoder();
            if (!props.clickable) {
                return;
            }
            baiduMapInstance.addEventListener('click', function (e) {
                addMarker(e.point);

                geoc.getLocation(e.point, function (result) {
                    // var addComp = rs.addressComponents;
                    //  console.log(result);
                    context.emit('changedPosition', {
                        title: result.address,
                        addres: result.address,
                        point: result.point,
                        surroundingPois: result.surroundingPois
                    });
                });
                // console.log(e.point);
            });
        };

        const addMarker = function (point) {
            if (marker) {
                baiduMapInstance.removeOverlay(marker);
            }
            // marker = new BMap.Marker(point);
            // baiduMapInstance.addOverlay(marker);
            const seed = (props.username ? props.username.length : 0);
            const backgroundColor = randomBackgroundColor(seed, backgroundColors);
            const color = lightenColor(backgroundColor, 100);
            marker = new BMap.Label(
                `<div class='avater'>
                    <img  class='avater-img'/>
                    <div class="avater-header" style="color:${color};background-color:${backgroundColor}">${props.username ? props.username.substr(0, 1) : ''}</div>
                </div>`,
                { position: point }
            );
            marker.setStyle({
                padding: '0px',
                border: '0px solid transparent',
                backgroundColor: 'transparent'
            });
            baiduMapInstance.addOverlay(marker);
        };
        // 定位
        const SetLocation = (point) => {
            baiduMapInstance.centerAndZoom(point, 14);
            baiduMapInstance.panTo(point);
            addMarker(point);
        };
        // const getLocation = () => {
        //     // 获取当前所在的位置
        //     getUserPosition((addr) => {
        //         const point = addr.point;
        //         if (!baiduMapInstance) {
        //             baiduMapInstance = initMap(divMap.value, point);
        //         }
        //         baiduMapInstance.centerAndZoom(point, 14);
        //         baiduMapInstance.panTo(point);
        //         addMarker(point);
        //         context.emit('onFixedPosition', addr);
        //     });
        // };
        watch(
            () => props.address,
            (newVal, oldVal) => {
                SetLocation(newVal.point);
            }
        );

        onMounted(() => {
            // 初始化
            if (!baiduMapInstance) {
                initBaiduMap(props.address.point);
            }
        });
        return {
            divMap,
            mapContainer
            // getLocation
        };
    }
};
</script>
<style lang="scss" scoped>
:deep(.avater) {
  z-index: 102;
  position: absolute;
  top: -58px;
  left: -41px;
  border-color: transparent;
  padding: 0%;
  margin: 0%;
  width: 80px;
  height: 80px;
  background-color: transparent;

  .avater-header {
    position: absolute;
    top: 8px;
    left: 26px;
    margin-left: auto;
    margin-right: auto;

    width: 28px;
    height: 28px;
    border-radius:50%;
    text-align: center;
    font-size: 22px;
    line-height: 22px;
  }
  .avater-img {
    position: absolute;
    top: 4px;
    left: 13px;
    width: 54px;
    height: 54px;

    margin: 0 auto;
    content: url(../../assets/location.svg);
  }
}

.mapcontainer {
  position: relative;
  overflow: hidden;
}
.mask {

  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.85) 65%,
    #ffffff 100%
  );
}

#baiduMap {
  width: 100%;
  height: 100%;
}
</style>
